<template>
  <div class="bargainList">
    <div class="bargainList_top">
      <div class="bargainList_top_left">
        时间选择：
      </div>
      <div class="bargainList_top_center">
        <el-button
          type="primary"
          plain
          @click="handleClickAll()"
        >
          全部
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleClickToday()"
        >
          今天
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleClickYesterday()"
        >
          昨天
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleClickSeven()"
        >
          最近7天
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleClickThirty()"
        >
          最近30天
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleClickQuarter()"
        >
          本季度
        </el-button>
        <el-button
          type="primary"
          plain
          @click="handleClickYear()"
        >
          本年
        </el-button>
      </div>
      <div class="bargainList_top_right">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
        />
      </div>
    </div>
    <div class="bargainList_conter">
      <div class="bargainList_conter_left">
        砍价状态：
      </div>
      <div class="bargainList_conter_right">
        <el-select
          v-model="value"
          filterable
          placeholder="请选择"
          @change="handleSelect"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <select name="" id="" @click="handleSelect(e)">
          <option value="">请选择</option>
          <option value="进行中">进行中</option>
          <option value="已结束">已结束</option>
        </select> -->
      </div>
    </div>
    <div class="bargainList_bottom">
      <table
        border="1"
        width="1600px"
        class="table"
      >
        <tbody class="tbody">
          <tr
            class="tbody_tr"
            height="50"
          >
            <th width="100px">
              ID
            </th>
            <th>头像</th>
            <th width="120px">
              开团团长
            </th>
            <th width="200px">
              开团时间
            </th>
            <th>拼团商品</th>
            <th>几人团</th>
            <th>剩余砍价次数</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>拼团状态</th>
            <th>编辑</th>
          </tr>

          <tr
            v-for="(item, index) in tableList"
            :key="index"
            height="200"
          >
            <td>{{ item.id }}</td>
            <td width="150px">
              <img
                :src="item.img"
                alt=""
              >
            </td>
            <td>{{ item.name }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.allnum }}</td>
            <td>{{ item.residuenum }}</td>
            <td>{{ item.begindate }}</td>
            <td>{{ item.finishdate }}</td>
            <td>{{ item.flag ? "进行中" : "已结束" }}</td>
            <td
              width="150px"
              class="redacttext"
              @click="handleDetele(item, index)"
            >
              {{ item.flag ? "查看详情" : "删除" }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="paging">
      <!-- 分页 -->
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="newTable.length ? newTable.length : tableData.length"
        :page-size="2"
        @current-change="handleCurrentChange"
      />
    </div>
    <div :class="flagpop ? 'mask' : 'nomask'">
      <div :class="flagpop ? 'maskbox' : 'nomaskbox'">
        <div class="maskbox_top">
          <div class="maskbox_top_title">
            查看详情
          </div>

          <div
            class="maskbox_top_X"
            @click="handleX()"
          >
            X
          </div>
        </div>

        <div class="maskbox_conter">
          <div>ID</div>
          <div>头像</div>
          <div>开团团长</div>
          <div>拼团价格</div>
          <div>拼团时间</div>
        </div>
        <div class="maskbox_bottom">
          <div>{{ detele.id }}</div>
          <div>
            <img
              :src="detele.img"
              alt=""
              class="maskbox_bottom_img"
            >
          </div>
          <div>{{ detele.name }}</div>
          <div>{{ detele.price }}</div>
          <div>{{ detele.begindate }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "进行中"
        },
        {
          value: "选项2",
          label: "已结束"
        }
      ],
      value: "",
      value1: "",
      tableData: [], // 分页总数据
      tableList: [], // 分页展示数据
      pages: 1, // 当前页面
      pagesnum: 0, //  页面总数
      pagesize: 2, //每页展示个数
      flagpop: false,
      detele: [],
      newTable: [],
      num: 0
    };
  },
  created() {
    axios.get("/getBargainList").then(res => {
      console.log(res.data.list);
      this.tableData = res.data.list;
      this.handleTable();
    });
  },
  methods: {
    handleClickAll() {
      // 全部按钮事件
      console.log(this.value1, "全部");
    },
    handleClickToday() {
      // 今天按钮事件
      console.log(this.value1, "今天");
    },
    handleClickYesterday() {
      // 昨天按钮事件
      console.log(this.value1, "昨天");
    },
    handleClickSeven() {
      // 最近7天按钮事件
      console.log(this.value1, "最近7天");
    },
    handleClickThirty() {
      // 最近30天按钮事件
      console.log(this.value1, "最近30天");
    },
    handleClickQuarter() {
      // 本季度按钮事件
      console.log(this.value1, "本季度");
    },
    handleClickYear() {
      // 本年按钮事件
      console.log(this.value1, "本年");
    },
    handleTable() {
      // 分页渲染
      /* 
        区分状态之前tableData
        区分状态之后 tableData数据源经过filter 生成newTable
      */
      if (this.newTable.length > 0) {
        this.tableList = this.newTable.slice(
          (this.pages - 1) * this.pagesize,
          this.pagesize * this.pages
        );
      } else {
        console.log(this.tableData);
        this.tableList = this.tableData.slice(
          (this.pages - 1) * this.pagesize,
          this.pagesize * this.pages
        );
      }
    },
    handleNewTable() {
      // 分页渲染
      this.tableList = this.newTable.slice(
        (this.pages - 1) * this.pagesize,
        this.pagesize * this.pages
      );
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.handleTable();
    },
    handleDetele(item) {
      if (item.flag == true) {
        this.flagpop = true;
        this.detele = item;
      } else {
        // this.tableData.splice(item.id - 1, item.id - 1);
        // this.handleTable();
        console.log(this.num);
        this.tableData.splice(item.id - this.num, 1);
        this.handleTable();
        this.num++;
      }
    },
    handleX() {
      this.flagpop = false;
    },
    handleSelect(v) {
      if (v == "选项1") {
        this.newTable = this.tableData.filter(item => {
          return item.flag == true;
        });
        if (this.newTable.length) {
          this.handleNewTable();
        }
      } else if (v == "选项2") {
        this.newTable = this.tableData.filter(item => {
          return item.flag == false;
        });
        if (this.newTable.length) {
          this.handleNewTable();
        }
      }
    }
    // handleSelect(e) {
    //   console.log(e.target);
    // },
  }
};
</script>

<style lang="scss" scoped>
.bargainList {
  width: 1700px;
  height: 800px;
  background: #f2f2f2;
  margin-top: 20px;
  margin-left: 50px;
}
.bargainList_top {
  width: 100%;
  height: 80px;
}
.bargainList_top_left {
  width: 100px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  float: left;
  margin-left: 100px;
}
.bargainList_top_center {
  width: 700px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  float: left;
}
.bargainList_top_right {
  width: 300px;
  height: 80px;
  line-height: 80px;
  float: left;
}
.bargainList_conter {
  width: 100%;
  height: 80px;
  line-height: 80px;
}
.bargainList_conter_left {
  width: 100px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  margin-left: 100px;
  float: left;
}
.bargainList_conter_right {
  width: 280px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  float: left;
}
tr {
  text-align: center;
}
.table {
  margin-bottom: 20px;
  border-collapse: collapse;
}
.tbody_tr {
  font-size: 18px;
}
.table {
  margin-left: 50px;
}
.paging {
  margin-top: 20px;
  margin-left: 60px;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  // position: relative;
}
.nomask {
  display: none;
}
.maskbox {
  width: 600px;
  height: 200px;
  background: #fff;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}
.maskbox_top {
  width: 100%;
  height: 50px;
  border-bottom: 1px #ccc solid;
  display: flex;
}
.maskbox_top_X {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}
.maskbox_top_title {
  width: 460px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  font-weight: bold;
  margin-left: 60px;
}
.maskbox_conter {
  width: 100%;
  height: 70px;
  border-bottom: 1px #ccc solid;
  display: flex;
}
.maskbox_conter > div {
  width: 120px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 16px;
}
.maskbox_bottom {
  width: 100%;
  height: 70px;
  border-bottom: 1px #ccc solid;
  display: flex;
}
.maskbox_bottom > div {
  width: 120px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  font-size: 16px;
}
.maskbox_bottom_img {
  width: 50px;
  height: 50px;
  margin-top: 10px;
}
.redacttext {
  color: #69b4ff;
  cursor: pointer;
}
</style>
